<template>
  <div class="aside-box">
    <div class="aside-box-title">
      <span>
        <slot name="zh"></slot>
      </span>
      <span><slot name="en"></slot></span>
    </div>
    <div class="aside-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits();

</script>

<style lang="scss" scoped>
.aside-box {
  width: 100%;
  height: 100%;
  &-title {
    width: 100%;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 18px;
    background: url("@/assets/images/aside-bg-title.png") no-repeat;
    background-size: 100% 100%;
    padding-left: 48px;
    font-family: "阿里妈妈数黑体 Bold";
    margin-bottom: 10px;
    text-shadow: 2px 2px 2px #158eff;
    letter-spacing: 3px;
    > span:nth-child(1) {
      cursor: pointer;
    }
    > span:last-child {
      color: #215a8e;
      font-size: 14px;
      margin-left: 15px;
    }
  }
  &-content {
    width: 100%;
    height: calc(100% - 42px);
  }
}
</style>
